/**
 * @description 劫持数据对象，让其的变化可以被ui层获取到，从而做到 双向绑定 ， 这一步是数据劫持
 */

let obj = {
    a: 1,
    b: '2222',
    c: {
        ca: 'ssss'
    },
    d: {
        da: {
            daa: 11111
        },
        db: 11,
        dc: [11]
    },
    e: [1, 2, 3, 4, 5],
    f: [0, 0, 1, 1, 1]
}





const render = (key, val) => {
    console.log(`SET key=${key} val=${val}`);
}


const defineReactive = (obj, key, val) => {
    reactive(val)
    Object.defineProperty(obj, key, {
        get: () => {
            return val;
        },
        set: (newVal) => {
            // diff data
            if (val === newVal) {
                return;
            }
            val = newVal;
            render(key, val)
        }

    })
}

// const isArraySame = (oldArr, newArr) => {
//     const newLength = newArr.length, oldLength = oldArr.length
//     if (newLength !== oldLength) { return false }
//     let tag = true
//     for (let i = 0; i < newLength; i++) {
//         if (newArr[i] !== oldArr[i]) {
//             tag = false
//         }
//     }
//     return tag;
// }

// const arrRender = (action, ...args) => {
//     console.log(`SET method=${action},args=${[...args].join(',')}`);
// }

// const oldPrototype = Array.prototype
// const newPrototype = Object.create(oldPrototype); // 建立一个新的原型

// ['push', 'splice'].forEach(methodName => {
//     newPrototype[methodName] = function (...args) {
//         // 执行打印/劫持函数
//         arrRender(methodName, ...args)

//         // 可以在这里使用老的原型直接执行
//         oldPrototype[methodName].call(this, ...arguments)

//         // 也可以返回返回老的原型上的方法，在下面执行
//         // return oldPrototype[methodName]
//     }
// })

const reactive = (obj) => {
    // 1. 这里需要是一个对象，否则会报错
    // if (Array.isArray(obj)) {
    //     // defineArrayReactive()
    //     obj.__proto__ = newPrototype
    // }
    if (typeof obj === 'object') {
        for (let key in obj) {
            defineReactive(obj, key, obj[key])
        }
    }
}

reactive(obj)

obj.a = 10 // SET key=a val=10
obj.b = '2222' //
obj.c.ca = 'aaaaa' // SET key=ca val='aaaaa'
obj.d.da.daa = 2222 // SET key=daa val=2222
// obj.e.push(0, 1, 1, 1, 1, 1)
// obj.f.splice(0, 0, [1, 2, 3, 4, 5])
// obj.f.splice(0, 0, 1, 2, 3, 4)


